@extends('admin.layouts.admin')
@section('content')
    <div class="card">
        <div class="card-body">
            <ul class="nav nav-tabs nav-overflow header-tabs">
                <li class="nav-item">
                    <a href="{{route('admin.goods.index')}}" class="nav-link pb-3  ">
                        商品列表
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{route('admin.goods.create')}}" class="nav-link pb-3 active">
                        新增商品
                    </a>
                </li>
            </ul>
        </div>
        <form action="{{route('admin.goods.store')}}" method="post">
            @csrf
            <div class="card-body">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <label>商品名称</label>
                            <input type="text" name="title" required value="{{old('title')}}" class="form-control">
                            <label>商品价格</label>
                            <input type="number" name="price" required value="{{old('price')}}" class="form-control">
                            <div class="form-group">
                                <label for="">商品所属栏目</label>
                                <div class="row">
                                    <div class="form-group col-4">
                                        <label>一级分类</label>
                                        <select name="category_id[]" required id="oneCategory" class="form-control">

                                                <option value="">一级分类</option>
                                                @foreach($categorys as $category)
                                                    <option value="{{$category['id']}}"
                                                            {{--刚进入页面的时候old('category_id')值为null--}}
                                {{$category['id']==old('category_id')[0]?'selected':''}}
                                                        {{--用下面的函数不合适,因为刚进入页面的时候old('category_id')为null,但是使用in_array()函数第二个参数必须要是一个数组,所以只能用上面那种方式--}}
{{--                             {{in_array($category['id'],old('category_id'))?'selected':''}}--}}
                                                    >
                                                        {{$category['title']}}
                                                    </option>
                                                @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-4">
                                        <label>二级分类</label>
                                        <select name="category_id[]" id="twoCategory" class="form-control">
                                            <option value="">二级分类</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-4">
                                        <label>三级分类</label>
                                        <select name="category_id[]" id="threeCategory" class="form-control" required>
                                            @if(old('Category'))
                                                <option value="">olddd</option>
                                            @else
                                                <option value="">三级分类</option>
                                            @endif
                                        </select>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group">
                                <label>商品描述</label>
                <input type="text" name="description" class="form-control"
                       value="{{old('description','')}}">
                            </div>
                            <div class="form-group" style="overflow:hidden;">
                                <label>商品图片</label>
                                <button onclick="upImageMul(this)" class="btn btn-default btn-sm" type="button">
                                    选择图片
                                </button>
                                <div id="box">
                                    {{--如果old('pics')为真说明有旧数据,这个时候就循环old('pics')将旧数据拿出来--}}
                                    @if(old('pics'))
                                        @foreach(old('pics') as $pic)
                                            <img src="{{$pic}}" alt="">
                                            <input type="text" hidden value="{{$pic}}">
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <label>商品详情</label>
                                <textarea id="container" name="contant" style="height:300px;width:100%;">
                                   {{old('contant')}}
                                </textarea>
                            </div>
                            <div class="form-group">
                                <label>是否推荐</label>
                                <input type="checkbox" value="1" name="is_commend">
                            </div>
                        </div>

                    </div>
                </div>
                <div hidden class="card-footer text-muted">
                    <button class="btn btn-primary btn-sm">保存提交</button>
                </div>
            </div>
            <div class="card-body" id="product">
                <div class="card-header">
                    <ul class="nav nav-pills nav-pills-sm">
                        <span class="nav-link active small">添加货品相关数据</span>
                    </ul>
                </div>
                <div class="card-body" id="product">
                    <div class="card" v-for="(v,k) in products">
                        <div class="card-body">
                            <div class="form-group">
                                <label>货品属性</label>
                                <input type="text" class="form-control" v-model="v.attrs"
                                       placeholder="请输入货品属性,不同属性用,隔开...">
                            </div>
                            <div class="form-group">
                                <label>货品库存</label>
                                <input type="text" class="form-control" v-model="v.kucun" placeholder="请输入货品库存...">
                            </div>
                            <div class="form-group">
                                <label>附加价格</label>
                                <input type="text" class="form-control" v-model="v.addPrice"
                                       placeholder="请输入货品附加价格...">
                            </div>
                            <button type="button" class="btn btn-danger" @click="del(k)">删除货品</button>
                        </div>
                    </div>
                    <button type="button" class="btn btn-success btn-sm" @click="add()">添加货品</button>
                </div>
                <textarea name="product" hidden cols="30" rows="10">@{{ products }}</textarea>
                <div class="card-footer text-muted">
                    <button type="submit" class="btn btn-primary btn-sm">保存数据</button>
                </div>
            </div>
        </form>
    </div>
@endsection
@push('css')
    <style>
        #box img {
            width: 200px;
            float: left;
            margin-right: 10px;
            border: solid 1px #999;
            padding: 10px;
            height: 200px;
        }
    </style>
@endpush
@push('js')
    {{--百度编辑器--}}
    <script>
        require(['hdjs'], function (hdjs) {
            hdjs.ueditor('container', {hash: 2, data: 'hd'}, function (editor) {
                console.log('编辑器执行后的回调方法')
            });
        })

        //上传图片
        function upImageMul(obj) {
            require(['hdjs'], function (hdjs) {
                hdjs.image(function (images) {
                    console.log(images)
                    $(images).each(function (k, v) {
                        // 上传成功后,除了往box的盒子里面加图片显示之外,还应该加上input隐藏域,用来提交图片的数据
                        $("<img src='" + v + "'/><input type='hidden' name='pics[]' value='" + v + "'>").appendTo('#box');
                    })
                }, {
                    //上传多图
                    multiple: true,
                })
            });
        }

        // 由一级分类获取二级分类的数据
        require(['hdjs', 'jquery'], function (hdjs, $) {
            $("#oneCategory").change(function () {
                // 先将二级分类的下拉框清空
                $("#twoCategory").html('<option value="">选择二级分类</option>');
                //将三级分类的下拉框也清空
                $("#threeCategory").html('<option value="">选择三级分类</option>');

                // 获取当前选择的顶级分类的id
                var id = $(this).val();
                // 发送异步请求获取二级分类数据
                // 发送异步请求,获取当前选择的分类的子分类数据
                if (id) {
                    $.ajax({
                        url: '/admin/getSonCategory/' + id, //请求地址
                        method: 'get', //请求方式
                        dataType: 'json', // 返回数据的格式
                        success: function (res) {
                            // 将获取到的二级分类数据追加到二级分类下拉框中去
                            // 定义一个空字符串,用来接收循环组合的内容
                            var html = '';
                            $.each(res, function (k, v) {
                                html += '<option value="' + v.id + '">' + v.title + '</option>';
                            })
                            $('#twoCategory').append(html);
                        }
                    })
                }
            })
        })
        // 由二级分类获取相应二级分类下的三级分类的数据信息
        require(['hdjs', 'jquery'], function (hdjs, $) {
            $("#twoCategory").change(function () {
                // 先将三级分类的下拉框清空
                $("#threeCategory").html('<option value="">选择三级分类</option>');
                // 获取当前选择的顶级分类的id
                var id = $(this).val();
                // 发送异步请求获取二级分类数据
                // 发送异步请求,获取当前选择的分类的子分类数据
                if (id) {
                    $.ajax({
                        url: '/admin/getSonCategory/' + id, //请求地址
                        method: 'get', //请求方式
                        dataType: 'json', // 返回数据的格式
                        success: function (res) {
                            // 将获取到的二级分类数据追加到二级分类下拉框中去
                            // 定义一个空字符串,用来接收循环组合的内容
                            var html = '';
                            $.each(res, function (k, v) {
                                html += '<option value="' + v.id + '">' + v.title + '</option>';
                            })
                            $('#threeCategory').append(html);
                        }
                    })
                }
            })
        })
        //货品添加相关vue
        require(['hdjs', 'vue'], function (hdjs, vue) {
            new vue({
                el: '#product',
                data: {
                    products: {!! old('product','[]') !!}
                },
                methods: {
                    add() {
                        var item = {attrs: '', kucun: 0, addPrice: 0}
                        this.products.push(item)
                    },
                    del(k) {
                        // 从products中相应的k条开始删除一个
                        this.products.splice(k, 1)
                    }
                }
            })
        })
    </script>
@endpush

